<template>
  <div
    class="CustomHealthEval"
    :style="{zIndex: dzIndex, width: cwidth, height: cheight}"
  >
    <div class="che-header">
      <p>A > B > C > D</p>
      <p>整体健康程度：80%</p>
    </div>
    <Tree
      :data="data1"
      :render="renderContent"
    ></Tree>
    
  </div>
</template>
<script>
export default {
  name: "CustomHealthEval",
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    width: {
      type: Number,
      default: 320
    },
    height: {
      type: Number,
      default: 580
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      data1: [
        {
          title: "系统1",
          expand: true,
          children: [
            {
              title: "child 1-1",
              expand: true
            },
            {
              title: "child 1-2",
              expand: true
            },
            {
              title: "leaf 1-1-1",
              expand: true
            },
            {
              title: "leaf 1-1-2",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            },
            {
              title: "child 1-1",
              expand: true
            },
            {
              title: "child 1-2",
              expand: true
            },
            {
              title: "leaf 1-1-1",
              expand: true
            },
            {
              title: "leaf 1-1-2",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            }
          ]
        },
        {
          title: "系统2",
          expand: true,
          children: [
            {
              title: "child 1-1",
              expand: true
            },
            {
              title: "child 1-2",
              expand: true
            },
            {
              title: "leaf 1-1-1",
              expand: true
            },
            {
              title: "leaf 1-1-2",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            },
            {
              title: "leaf 1-2-1",
              expand: true
            }
          ]
        }
      ]
    };
  },
  computed: {
    csrc() {
      return this.src;
    },
    cwidth() {
      return this.width + "px";
    },
    cheight() {
      return this.height + "px";
    },
    dzIndex() {
      return this.zIndex;
    }
  },
  methods: {
    renderContent(h, { root, node, data }) {
      console.log(h);
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "auto"
          }
        },
        [
          h("span", [
            h("span", data.title),
            h("span", {
              style: {
                display: "inline-block",
                width: "32px"
              }
            }),
            h("span", "80%")
          ])
        ]
      );
    }
  }
};
</script>
<style lang="less">
.CustomHealthEval {
  overflow: auto;
  text-align: left;
  padding: 10px;
}
.che-header{
  font-size: 16px;
  color: #666;
  line-height: 28px;
}
</style>